<template>
	<view>
		<view class="bind_title">修改密码</view>
		<view class="phone_login_box">
			<view class="phone_login_input_box">
				<view class="phone_login_input_name">旧密码</view>
				<view class="phone_login_input_inp">
					<input type="password" v-model="old_pwd" maxlength="24" placeholder="请输入旧密码(未设置请留空)"/>
				</view>
			</view>
			<view class="phone_login_input_box">
				<view class="phone_login_input_name">新密码</view>
				<view class="phone_login_input_inp">
					<input type="text"  :password="showPassword" v-model="new_pwd" maxlength="24" placeholder="请输入新密码"/>
					<view class="phone_login_input_code" @click="handleChange()">
						<image src="https://www.cccshansong.com/chong_weapp/eye.png" mode="" v-if="!showPassword"></image>
						<image src="https://www.cccshansong.com/chong_weapp/eye1.png" mode="" v-if="showPassword"></image>
					</view>
				</view>
			</view>
			<view class="phone_login_input_box">
				<view class="phone_login_input_name">确认密码</view>
				<view class="phone_login_input_inp">
					<input type="password" v-model="new_pwd1" maxlength="24" placeholder="请再次输入密码"/>
				</view>
			</view>
		</view>
		<view class="phone_login_btn2">
			<view class="phone_login_btn2_item"  @click="goForget()">忘记密码？</view>
		</view>
		<view class="phone_login_btn" hover-class="hover_class"  @click="handleSubmit()" >确 定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:true,
				old_pwd:'',
				new_pwd:'',
				new_pwd1:'',
				second:60,
				showText:true,
				show_refresh:false,
				btn_status:true,
				phone:'',
				code:'',
			};
		},
		onLoad() {

		},
		methods:{
			goForget(){
				uni.navigateTo({
					url:'/pages/user/forget'
				})
			},
			handleChange(){
				var a = this
				a.showPassword = !a.showPassword
			},
			handleSubmit(){
				var a = this
				if(a.new_pwd==''){
					uni.showToast({
						title:'请输入新密码',
						icon:'none'
					})
				}else if(a.new_pwd1==''){
					uni.showToast({
						title:'请再次输入新密码',
						icon:'none'
					})
				}else if(a.new_pwd!=a.new_pwd1){
					uni.showToast({
						title:'两次密码输入不一致',
						icon:'none'
					})
				}else{
					if(a.btn_status){
						uni.showLoading({
							title:'加载中'
						})
						a.globalajax('user/setPassword',{
							old_password:a.old_pwd,
							password:a.new_pwd,
						},'POST',function(res) {
								console.log(res);
								uni.hideLoading()
								if(res.data.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									setTimeout(()=>{
										uni.navigateBack()
									},500)
								}else{
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									});
								}
							}
						);
					}
				}
			},
			getCode(){
				var a = this
				if(a.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				}else if(a.phone.length!=11){
					uni.showToast({
						title:'手机号不足11位',
						icon:'none'
					})
				}else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(a.phone)){
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none'
					})
				}else{
					uni.showLoading({
						title:'加载中'
					})
					a.globalajax('common/sms_send',{
						mobile:a.phone,
						temp:'2099552',
					},'GET',function(res) {
							console.log(res);
							uni.hideLoading()
							if(res.data.code==200){
								a.showText = false
								uni.showToast({
									title: '发送成功',
									icon:'none',
									duration: 2000
								});
								var interval = setInterval(() => {
								    let times = --a.second
								    a.second = times<10?'0'+times:times //小于10秒补 0
								}, 1000)
								setTimeout(() => {
								    clearInterval(interval)
								    a.second=60
								    a.showText = true
								}, 60000)
							}else{
								a.$showModal({
									title:'友情提示',
									content:res.data.msg,
									showCancel:false,
									confirmText:'我知道了',
									success: (res) => {
									}
								});
							}
						}
					);
				}
			},
		}
	}
</script>

<style lang="scss">
.phone_login_btn2{
		margin: 0 auto;
		margin-top: 16rpx;
		width: 702rpx;
		height: 88rpx;
		border-radius: 16rpx;
		background:#FFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.phone_login_btn2_item{
			height: 88rpx;
			width: auto;
			line-height: 88rpx;
			color: #418AFF;
			font-weight: 500;
		}
	}
.phone_login_box{
	padding-top: 48rpx;
	background-color: #fff;
	.agree_xieyi_box{
		padding-top: 48rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #606266;
		text{
			color: #418AFF;
			margin: 0 0rpx
		}
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
	}

	.phone_login_btn{
		margin: 0 auto;
		margin-top: 80rpx;
		width: 702rpx;
		height: 88rpx;
		border-radius: 16rpx;
		background:#418AFF;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
	}
	.phone_login_input_box{
		width: 686rpx;
		height: 88rpx;
		border-radius: 16rpx;
		// background: #F5F6F8;
		margin: 0 auto;
		display: flex;
		margin-bottom: 32rpx;
		border-bottom: 2rpx solid rgba(235, 238, 245, 1);
		.phone_login_input_name{
			width: 150rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #303133;
			font-size: 30rpx;
			font-weight: 500;
		}
		.phone_login_input_inp{
			width: 540rpx;
			height: 88rpx;
			position: relative;
			margin-left: 40rpx;
			.phone_login_input_code{
				position: absolute;
				top: 13rpx;
				right: 0rpx;
				color:#418AFF;
				font-size: 28rpx;
				z-index: 90;
				width: 100rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 12rpx;
				// background-color: #08CC93;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			input{
				height: 88rpx;
				line-height: 88rpx;
				font-size: 30rpx;
			}
		}
	}
}
.phone_login_btn{
	margin: 0 auto;
	margin-top: 80rpx;
	width: 702rpx;
	height: 88rpx;
	border-radius: 16rpx;
	background: #418AFF;
	text-align: center;
	line-height: 88rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: 500;
}
.bind_title{
	padding-top:60rpx;
	color: rgba(48, 49, 51, 1);
	font-size: 48rpx;
	padding-left: 30rpx;
	font-weight: bold;
}
</style>
